<template>
	<!-- 编辑资料 -->
	<view class="editData">
		<view class="edit-list">
			<view class="edit-item" style="line-height: 100rpx;">
				<view class="con-box" @click="chooseImg">
					<view class="title-box">
						<text class="item-title">企业头像</text>
						<text class="star">*</text>
					</view>
					<view class="item-info">
						<image v-if="headImg" class="head-img" :src="headImg"></image>
						<text class="item-con" style="color: #A8A8A8;" v-else>点击上传</text>
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
			<view class="edit-item" v-if="!isCreate" @click="toUrl('/pages/meSub/editData/moreSet')">
				<view class="con-box">
					<text class="item-title">更多设置</text>
					<view class="item-info">
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
			<view class="edit-item" @click="showItem('企业全称',1,compInfo.companyNameCn)">
				<view class="con-box">
					<view class="title-box">
						<text class="item-title">企业全称</text>
						<text class="star">*</text>
					</view>
					<view class="item-info">
						<text style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;width: 400rpx;text-align: right;" :class="compInfo.companyNameCn?'item-con':'item-con2'">{{compInfo.companyNameCn || '点击输入'}}</text>
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
			<view class="edit-item" @click="showItem('企业法人',2,compInfo.owner)">
				<view class="con-box">
					<view class="title-box">
						<text class="item-title">企业法人</text>
						<text class="star">*</text>
					</view>
					<view class="item-info">
						<text :class="compInfo.owner?'item-con':'item-con2'">{{compInfo.owner || '点击输入'}}</text>
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
			<picker mode="date" :value="compInfo.registDate" :end="startTime" @change="bindTimeChange">
				<view class="edit-item">
					<view class="con-box">
						<view class="title-box">
							<text class="item-title">成立时间</text>
							<text class="star">*</text>
						</view>
						<view class="item-info">
							<text :class="compInfo.registDate?'item-con':'item-con2'">{{compInfo.registDate?$u.timeFormat(new Date(compInfo.registDate || Date.now()), 'yyyy-mm-dd') : '选择时间'}}</text>
							<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
						</view>
					</view>
				</view>
			</picker>
			<view class="edit-item" @click="showItem('企业简介',3,compInfo.remarks)">
				<!-- remarks -->
				<view class="con-box">
					<text class="item-title">企业简介</text>
					<view class="item-info">
						<text :class="compInfo.remarks?'item-con':'item-con2'">{{compInfo.remarks?'点击查看':'点击填写'}}</text>
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
			<uni-data-picker seltype="city" @changeCityData="changeCityData" :showAll="true" :currDataCity="currDataCity" placeholder="请选择地区" popup-title="选择地区" @change="onchangePlace">
				<view class="edit-item">
					<view class="con-box">
						<view class="title-box">
							<text class="item-title">所在城市</text>
							<text class="star">*</text>
						</view>
						<view class="item-info">
							<text class="item-con" v-if="compInfo.cityName">{{compInfo.cityName}}</text>
							<text class="item-con" style="color: #A8A8A8;" v-else>点击选择</text>
							<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
						</view>
					</view>
				</view>
			</uni-data-picker>
			<view class="edit-item" @click="showItem('详细地址',10,compInfo.addr)">
				<view class="con-box">
					<view class="title-box">
						<text class="item-title">详细地址</text>
						<text class="star">*</text>
					</view>
					<view class="item-info">
						<text :class="compInfo.addr?'item-con':'item-con2'" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;width: 400rpx;text-align: right;">{{compInfo.addr || '点击填写'}}</text>
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
			<view class="edit-item" @click="showItem('主营业务',4,compInfo.mainBusiness)">
				<view class="con-box">
					<view class="title-box">
						<text class="item-title">主营业务</text>
						<text class="star">*</text>
					</view>
					<view class="item-info">
						<text :class="compInfo.mainBusiness?'item-con':'item-con2'">{{compInfo.mainBusiness?'点击查看':'点击填写'}}</text>
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
			<view class="edit-item" @click="showItem('次营业务',5,compInfo.subBusiness)">
				<view class="con-box">
					<text class="item-title">次营业务</text>
					<view class="item-info">
						<text :class="compInfo.subBusiness?'item-con':'item-con2'">{{compInfo.subBusiness?'点击查看':'点击填写'}}</text>
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
			<uni-data-picker seltype="hy" @changeCurrData="changeCurrData" :currData="currData" :showAll="true" placeholder="请选择行业" popup-title="选择行业" @change="onchange">
				<view class="edit-item">
					<view class="con-box">
						<view class="title-box">
							<text class="item-title">所属行业</text>
							<text class="star">*</text>
						</view>
						<view class="item-info">
							<text :class="compInfo.industryTypeName?'item-con':'item-con2'" style="text-overflow: ellipsis;overflow: hidden;white-space: nowrap;width: 400rpx;text-align: right;">{{compInfo.industryTypeName && compInfo.industryTypeName.slice(0,18)+'...' || '点击选择'}}</text>
							<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
						</view>
					</view>
				</view>
			</uni-data-picker>
			<view class="edit-item" v-if="!isCreate" @click="showItem('联系人',6,compInfo.linker)">
				<view class="con-box">
					<text class="item-title">联系人</text>
					<view class="item-info">
						<text :class="compInfo.linker?'item-con':'item-con2'">{{compInfo.linker || '点击输入'}}</text>
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
			<view class="edit-item" v-if="!isCreate" @click="showItem('电话号码',7,compInfo.phone)">
				<!-- phone -->
				<view class="con-box">
					<text class="item-title">电话号码</text>
					<view class="item-info">
						<text :class="compInfo.phone?'item-con':'item-con2'">{{compInfo.phone || '点击输入'}}</text>
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
			<view class="edit-item" @click="showItem('邮箱',8,compInfo.email)">
				<!-- email -->
				<view class="con-box">
					<view class="title-box">
						<text class="item-title">邮箱</text>
						<text class="star">*</text>
					</view>
					<view class="item-info">
						<text :class="compInfo.email?'item-con':'item-con2'">{{compInfo.email || '点击输入'}}</text>
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>
			<view class="edit-item" @click="showItem('传真',9,compInfo.fax)">
				<!-- openid -->
				<view class="con-box">
					<text class="item-title">传真</text>
					<view class="item-info">
						<text :class="compInfo.fax?'item-con':'item-con2'">{{compInfo.fax || '点击输入'}}</text>
						<u-icon name="arrow-right" color="#808080" size="10"></u-icon>
					</view>
				</view>
			</view>

			<view class="btn-box">
				<button :disabled="btnDisable" type="primary" style="margin: 0 30rpx;background-color: #0080FF;" @click="createComp" class="blue-btn" v-if="isCreate">点击创建</button>
			</view>
		</view>
		<!-- 输入框弹出框 -->
		<uni-popup :maskClick="false" type="center" ref="inputPop">
			<uni-popup-dialog v-if="inpTitle" mode="input" @close="close" @confirm="confirm" :value="inpContent" :title="inpTitle">
			</uni-popup-dialog>
		</uni-popup>
		<image-cropper :cropHeight="200" :cropWidth="200" :src="tempFilePath" @confirm="confirmImg" @cancel="cancelImg">
		</image-cropper>
		<my-auth-modal></my-auth-modal>
	</view>
</template>
<script>
	import {
		getDate
	} from '@/utils/common.js'

	import {
		editUsrCompanyLogoNew,
		editUsrCompany,
		fileBatchUploadPublish
	} from "@/common/api/auth.js"
	import {
		getToken,
		setToken,
		clearToken
	} from '@/utils/token.js'
	import {
		uploadFilePromise
	} from "@/utils/upload.js"
	import ImageCropper from "@/pages/meSub/components/invinbg-image-cropper/invinbg-image-cropper.vue"
	export default {
		components: {
			ImageCropper
		},
		data() {
			const currentDate = getDate({
				format: true
			})
			return {
				// 修改头像
				logoData: {
					companyId: '',
					companyLogo: ''
				},
				//创建公司
				compInfo: {
					upd_file_logo: '', //必选	file 头像fileName
					companyLogo: '',
					cityName: '', //必选 省市县，空格隔开
					addr: '', //必选	详细地址
					lng: '', // 必选	经度
					lat: '', //必选 纬度
					craftsmanId: '', //	必选	 个人编号
					companyNameCn: '', //	必选	 公司名称
					remarks: '', // 公司介绍
					owner: '', //	必选	 法人
					registDate: '', // 创建时间
					mainBusiness: '', //必选 主营业务
					subBusiness: '', // 次营业务
					industryTypeId: '', //	必选	 行业id
					industryTypeName: '', //	必选	 行业名称五级，逗号隔开
					cityCode: '', //必选 地区编号
					email: '', //邮箱
					fax: '', //传真
					moduleNo: 'ydylapp1001' //	是	string	模块编号
				},
				//时间
				date: '',
				startTime: '',
				// //公司详情
				// compInfo: {},
				//input弹窗相关
				inpTitle: '',
				inpContent: '',
				inpIndex: 0,
				//picker相关
				visible: true,
				sexArr: ['男', '女'],
				lotusAddressData: {
					visible: false,
					provinceName: '',
					cityName: '',
					townName: '',
				},
				selArr: [], //所展示的picker数组
				selType: '', //选择的picker类型 nomal是单列选择器 place为地区选择器
				userNum: '', //企业编号
				headImg: '', //企业头像
				isCreate: false, //是否未创建头像
				btnDisable: false,
				lat: '',
				lng: '',
				tempFilePath: '',
				isShare: false,
				version: getToken('version'),
				//选择框
				currData: {},
				currDataCity: {}
			}
		},
		onLoad: function(option) {
			if (option.isShare) {
				this.isShare = true
			}
			//获取当前的前一天时间
			this.startTime = this.$u.timeFormat(new Date(Date.now()), 'yyyy-mm-dd');
			//获取用户信息
			this.logoData.companyId = this.userNum = getToken('complogin')['companyId']
			if (option.type == 'create') { //创建官网
				this.isCreate = true
				uni.setNavigationBarTitle({
					title: '创建官网'
				})
			} else {
				this.searchOneNew()
			}
		},
		//时间
		computed: {

			startDate() {
				return getDate('start');
			},
			endDate() {
				return getDate('end');
			}
		},
		methods: {
			async confirmImg(e) {
				//截图工具点击确定之后上传图片
				//如果不为空的话上传之后裁剪又会跳出来
				this.tempFilePath = ''
				let params = {
					params: {}
				}
				params['params']['fileType'] = 100
				params['params']['fileCode'] = 126
				params['url'] = e.detail.tempFilePath
				const result = await uploadFilePromise(params)
				this.headImg = 'https://www.ydylmold.cn/images/ydylapp/usrCompany/image/' + result
				let params2 = {
					companyId: getToken('complogin')['companyId'],
					companyLogo: result
				}
				if (!this.isCreate) {
					this.editItem(params2)
				} else {
					this.compInfo.companyLogo = result
				}
			},
			chooseImg() {
				uni.chooseImage({
					count: 1,
					success: (e) => {
						this.tempFilePath = e.tempFilePaths[0]
					}
				})
			},
			cancelImg() {},
			//创建企业
			createComp() {
				this.compInfo.lat = this.lat
				this.compInfo.lng = this.lng
				this.compInfo.industryTypeId = "10016"
				this.compInfo.craftsmanId = getToken('userInfo')['craftsmanId']
				let data = this.compInfo
				if (!data.companyLogo) {
					this.$u.toast('请上传企业头像')
				} else if (!data.companyNameCn) {
					this.$u.toast('请填写企业全称')
				} else if (!data.owner) {
					this.$u.toast('请填写企业法人')
				} else if (!data.registDate) {
					this.$u.toast('请选择企业成立时间')
				} else if (!data.cityCode) {
					this.$u.toast('请选择所在城市')
				} else if (!data.addr) {
					this.$u.toast('请选择企业地址')
				} else if (!data.mainBusiness) {
					this.$u.toast('请填写主营业务')
				} else if (!data.industryTypeName) {
					this.$u.toast('请选择所属行业')
				} else if (!data.email) {
					this.$u.toast('请填写邮箱')
				} else {
					if (this.btnDisable == false) {
						uni.showLoading({
							title: '提交中'
						})
						this.btnDisable = true
						fileBatchUploadPublish(this.compInfo).then(res => {
							uni.hideLoading()
							if (res.data && res.data.code == 1) { //创建成功
								this.$u.toast('创建成功')
								this.compInfo = {}
								setToken('version', 2)
								setToken('complogin', res.data.data)
								setToken('useNum', res.data.data.companyId)
								if (this.isShare) {
									uni.navigateBack({})
								} else {
									this.$store.commit('toIndex')
								}
							} else {
								this.$u.toast(res.data.msg || res.data.message || '创建失败')
								this.btnDisable = false
							}
						})
					}
				}
			},
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
			//改变城市选择
			onchangePlace(e) {
				//console.log(e,888)
				let arr = []
				let data = e.detail.value
				let param = {}
				this.compInfo.cityCode = data[1].value
				data.forEach(item => {
					arr.push(item.text)
				})
				param.cityName = arr.join(' ')
				this.editItem(param)
			},
			//选择行业
			onchange(e) {
				console.log('选择行业', e);
				let arr = e.detail.value
				let text = ''
				arr.forEach(item => {
					text = text + " " + item.text
				})
				text = text.trim();
				console.log('选择行业 text', text);
				this.compInfo.industryTypeName = text;
				this.editItem({
					'industryTypeId': getToken('chainTypeId'),
					'industryTypeName': text
				})
			},
			//改变行业选择 数据
			changeCurrData(e) {
				this.currData = e
			},
			// 改变城市选择数据
			changeCityData(e) {
				this.currDataCity = e
			},
			//打开弹窗
			showItem(title, index, content) {
				this.inpTitle = title
				this.inpIndex = index
				this.inpContent = content
				this.$refs['inputPop'].open()
			},
			//编辑单个
			editItem(param) {
				if (this.isCreate) {
					//获取当前传入对象的key值
					let keyname = Object.keys(param)[0]
					for (let k in this.compInfo) {
						//找到创建企业数据对象的key名，如果和传回来的key名对应就赋值
						if (k == keyname) {
							this.compInfo[k] = param[keyname]
						}
					}
				} else { //编辑单个
					param.companyId = String(this.userNum)
					editUsrCompany(param).then(res => {
						if (res.statusCode == 200) {
							this.compInfo = res.data
							this.$u.toast('修改成功')
						} else {
							this.$u.toast('请求出错')
						}
					})
				}
				this.$store.commit('isFresh', true)
			},
			//弹窗点取消
			close() {
				this.$refs['inputPop'].close()
				this.inpContent = '1'
			},
			//弹窗点确定
			confirm(value) {
				// if (!value) {
				// 	this.$u.toast('没有填写内容哦！')
				// 	return
				// }
				value = value.trim()
				let param = {}
				let index = this.inpIndex
				switch (index) {
					case 1: //企业全称
						if (value.length > 20) {
							this.$u.toast('不能超过20个字符')
						} else {
							this.editItem({
								'companyNameCn': value
							})
							this.close()
						}
						break;
					case 2: //企业法人
						if (value.length > 10) {
							this.$u.toast('不能超过10个字符')
						} else {
							this.editItem({
								'owner': value
							})
							this.close()
						}
						break;
					case 3: //企业简介
						this.editItem({
							'remarks': value
						})
						this.close()
						break;
					case 4: //主营业务
						this.editItem({
							'mainBusiness': value
						})
						this.close()
						break;
					case 5: //次营业务
						this.editItem({
							'subBusiness': value
						})
						this.close()
						break;
					case 6: //联系人
						if (value.length > 10) {
							this.$u.toast('不能超过10个字符')
						} else {
							this.editItem({
								'linker': value
							})
							this.close()
						}
						break;
					case 7: //电话号码
						if (this.$u.test.mobile(value) == true) {
							this.editItem({
								'contactNumber': value
							})
							this.close()
						} else {
							this.$u.toast('手机号有误')
						}
						break;
					case 8: //修改邮箱
						if (this.$u.test.email(value) == true) {
							this.editItem({
								'email': value
							})
							this.close()
						} else {
							this.$u.toast('邮箱格式有误')
						}
						break;
					case 9: //传真
						this.editItem({
							'fax': value
						})
						this.close()
						break;
					case 10:
						this.editItem({
							'addr': value
						})
						this.close()
						break;
					default:
						break;
				}
			},
			//获取用户信息
			async searchOneNew() {
				console.log('eeeeeeeeeeeeeee');
				let data = await this.$store.dispatch('searchOneNew', {
					userId: getToken('complogin')['companyId'],
					setShare: false
				})
				if (data.companyId) {
					this.compInfo = data
					this.headImg = 'https://www.ydylmold.cn/images/ydylapp/usrCompany/image/' + this.compInfo
						.companyLogo
				}
			},
			//时间选择器
			bindTimeChange: function(e) {
				this.editItem({
					'registDate': e.detail.value
				})
			},
		}
	}
</script>
<style scoped>
	.edit-list {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 20rpx;
	}

	.title-box {
		display: flex;
		align-items: center;
	}

	.star {
		color: #FF3434;
		margin-left: 10rpx;
		margin-bottom: 15rpx;
		display: block;
	}

	.btn-box {
		background-color: #FFFFFF;
		width: 750rpx;
		padding-top: 30rpx;
		padding-bottom: 40rpx;
		box-sizing: border-box;
	}

	.edit-item {
		border-bottom: 1rpx solid #f0f0f0;
		width: 686rpx;
		border-radius: 32rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(1, 54, 138, 0.1);
		margin-bottom: 20rpx;
	}

	.con-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 22rpx 0 32rpx;
	}

	.head-img {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
	}

	.right-icon {
		font-size: 40rpx;
		color: #2c3e50;
	}

	.item-info {
		display: flex;
		align-items: center;
	}

	.item-con {
		font-size: 28rpx;
		color: #2c3e50;
		margin-right: 12rpx;
		max-width: 400rpx;
	}

	.item-con2 {
		font-size: 28rpx;
		color: #A8A8A8;
		margin-right: 12rpx;
	}

	.item-title {
		font-size: 30rpx;
		color: #2c3e50;
		line-height: 100rpx;
	}

	.editData {
		background-color: #ffffff;
	}
</style>